<!--
* @FileDescription: 
* @Author: yuec621@outlook.com
* @Date: 2024-12-3 10:52:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-02-20 13:59:03
-->
<template>
    <div class="searBox">
        <el-row :gutter="23">
            <el-col :span="5" v-if="searListData[0].label !=''" class="leftsear">
                <div style="cursor: pointer;" v-for="(item,index) in searListData" @click="navClick(item, index)"
                    :style="{color:state.activeIndex==index?'#409eff':''}">
                    {{ item.label }}
                </div>
            </el-col>
            <el-col :span="searListData[0].label !=''?17:24">
                <div class="rightsear colgrid"  ref="container">
                    <div class="boxList" v-for="item in searListData" :id="item.id">
                        <el-row :gutter="23">
                            <el-col :span="24" style="margin-bottom: 10px;">
                                {{ item.label }}
                            </el-col>
                            <el-col :span="item.col" style="margin-bottom: 10px;display: flex;align-items: center;" v-for="itemSub in item.descList">
                                <span
                                    style="display: inline-block;margin-bottom: 10px;color: rgba(62, 70, 79, 0.8);
                                    white-space: nowrap;min-width: 100px;">
                                    {{ itemSub.label }}</span>
                                <div class="formLabel">
                                    <el-date-picker style="width: 300px;" v-if="itemSub.type==='timeRangepage'" 
                                        v-model="itemSub.bindData" type="datetimerange" start-placeholder="开始时间"
                                        end-placeholder="结束时间" />
                                    <el-date-picker style="width: 300px;" v-if="itemSub.type==='daterange'" 
                                        v-model="itemSub.bindData" type="daterange" start-placeholder="开始日期"
                                        end-placeholder="结束日期" />
                                    <el-select style="width: 300px;"  v-if="itemSub.type==='select'" v-model="itemSub.bindData"
                                        clearable placeholder="请选择" @change="searchChange(itemSub,$event)">
                                        <el-option v-for="item in itemSub.options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-cascader style="width: 300px;" ref="cascaderLabelRef"
                                     v-model="itemSub.bindData"
                                        v-if="itemSub.type==='cascadercheckStrictly'"
                                        @change="cascaderLabelChange($event,itemSub)" :options="itemSub.options"
                                        :props="itemSub.props" clearable />
                                    <el-radio-group style="width: 300px;" class="equal-width-group" v-if="itemSub.type==='radio'"
                                        v-model="itemSub.bindData" @change="radioChange($event,itemSub)">
                                        <el-radio v-for="itemop in itemSub.options" :label="itemop.value" size="large">
                                            {{itemop.label}}</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="form_footer">
            <el-button @click="resetSearchClick">重置</el-button>
            <el-button type="primary" @click="submitSearchResultClick">
                确定
            </el-button>
        </div>
    </div>
</template>

<script setup>
    import {
        computed,
        onMounted,
        reactive,
        watchEffect
    } from 'vue';
    import {
        getinfolistSensorNames,
        getinfolistSwitchNames,
        getinfogainAddNames,
        getaddressInfo,
        searchareaTree,
        getinfopumpNames,
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const container = ref(null)
    const userStore = useUserStore();
    const emits = defineEmits([''])
    const props = defineProps({
        searList: {
            type: Array,
            default: () => {
                return []
            }
        },
        noLeftshow: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        XY: {
            x: undefined,
            y: undefined
        },
        lineConParams: {
            type: String,
            default: () => {
                return undefined
            }
        },
    })

    // 重点
    const searListData = reactive(props.searList)
    const state = reactive({
        activeIndex: 0,
        searchObj: {
            type:props.lineConParams
        },
    })
    // 锚点定位
    function navClick(item, index) {
        state.activeIndex = index;
        if (index == 0) {
            container.value.style.transform = 'translateY(0)';
        } else if (index == 1) {
            container.value.style.transform = 'translateY(-90px)';
        } else if (index == 2) {
            container.value.style.transform = 'translateY(-276px)';
        }
    }

    // 重置按钮
    function resetSearchClick() {
        searListData.forEach(item => {
            item.descList.forEach(itemsub => {
                if (itemsub.type != 'timeRangepage') {
                    itemsub.bindData = undefined
                    if (itemsub.field == 'flag') {
                        itemsub.bindData = false
                    }
                }
            })
        })
        emits('submitSearchResultClick', [],{})
    }

    function submitSearchResultClick() {
        let data = []
        searListData.forEach(item => {
            item.descList.forEach(itemsub => {
                if (itemsub.bindData != undefined && itemsub.bindData != '') {
                    data.push(itemsub)
                }
            })
        })
        emits('submitSearchResultClick', data,state.searchObj)
    }

    // 单选事件
    async function radioChange(val, selitem) {
        if (selitem.judcond == 'deviceType') {
            state.rightListadjust = []
            state.searchObj.type = val
            state.searchObj.sensorName = undefined
            let arr = []
            if (val == 'A') {
                arr = await getinfolistSensorNames()
            } else if (val == 'D') {
                arr = await getinfolistSwitchNames()
            } else if (val == 'S') {
                arr = await getinfogainAddNames()
            }
            searListData.forEach(item => {
                item.descList.forEach(async itemsub => {
                    if (val != 'A') {
                        if (itemsub.judcond == 'jingdu') {
                            itemsub.label = undefined
                            itemsub.type = undefined
                        }
                    } else {
                        if (itemsub.judcond == 'jingdu') {
                            itemsub.label = '测点精度'
                            itemsub.type = 'radio'
                        }
                    }
                    if (itemsub.judcond == 'sensorchoiceName') {
                        itemsub.bindData = undefined
                        itemsub.options = arr.data.map(key => {
                            return {
                                label: key,
                                value: key
                            }
                        })
                    }
                })
            })
        }
    }

    function searchChange(val, e) {
        if (val.judcond == 'deviceCate') {
            state.searchObj[val.field] = e
            // 切换清除传感器名称填充数据
            state.searchObj.choiceName = undefined
            state.searchObj.sensorName = undefined
            searListData.forEach(item => {
                item.descList.forEach(async itemsub => {
                    if (itemsub.judcond == 'sensorchoiceName') {
                        itemsub.bindData = undefined
                        let arr = []
                        if (e) {
                            arr = await getinfopumpNames()
                            itemsub.options = arr.data.map(key => {
                                return {
                                    label: key,
                                    value: key
                                }
                            })
                        } else {
                            arr = await getinfolistSensorNames()
                            itemsub.options = arr.data.map(key => {
                                return {
                                    label: key,
                                    value: key
                                }
                            })
                        }
                    }
                })
            })
        } else if (val.judcond == 'sensorchoiceName') {
            if (state.searchObj.flag) {
                state.searchObj[val.field] = e
            } else {
                state.searchObj[val.fieldT] = e
            }
        } else {
            state.searchObj[val.field] = e
        }
    }

    function cascaderLabelChange(val, item) {
        if (item.judcond == 'areaName') {
            state.searchObj[item.field] = val
            state.searchObj[item.fieldT] = proxy.$refs.cascaderLabelRef[0]
                .getCheckedNodes()[0]
                .label
        }
    }
    // 获取模拟量开关量累计量地点等下拉数据接口
    // 默认进入页面加载下拉接口
    if (props.searList.length > 0) {
        props.searList.forEach(async item => {
            await item.descList.forEach(async itemsub => {
                if (itemsub.iSdefault) {
                    state.searchObj[itemsub.field] = itemsub.bindData
                }
                if (itemsub.judcond == 'sensorchoiceName') {
                    let arr = []
                    if (props.lineConParams == 'A') {
                        if (state.searchObj.flag) {
                            arr = await getinfopumpNames()
                        } else {
                            arr = await getinfolistSensorNames()
                        }
                    } else if (props.lineConParams == 'D') {
                        arr = await getinfolistSwitchNames()
                    } else if (props.lineConParams == 'S') {
                        arr = await getinfogainAddNames()
                    }
                    itemsub.options = arr.data.map(item => {
                        return {
                            label: item,
                            value: item
                        }
                    })
                }
                if (itemsub.judcond == 'areaName') {
                    let arr = await searchareaTree()
                    itemsub.options = arr.data
                }
                if (itemsub.judcond == 'placeName') {
                    let arr = await getaddressInfo()
                    itemsub.options = arr.data.list.map(item => {
                        return {
                            label: item.placeName,
                            value: item.placeName
                        }
                    })
                }
            })
        })
    }
    watchEffect(() => {

    })
    onMounted(() => {})
</script>
<style lang="scss" scoped>
    .equal-width-group {
        display: flex;
        width: 100%;
        justify-content: start;
    }

    .equal-width-group .el-radio {
        width: 20%;
    }
    .searBox {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 2px 20px rgba(91, 109, 128, 0.2);
        backdrop-filter: blur(20px);
        overflow-x: hidden;
        max-width: 600px;
        border: 1px solid rgba(68, 136, 255, 0.1);
        padding: 16px 0px;

        .leftsear {
            margin-left: 26px;
            font-size: 16px;
            color: rgba(62, 70, 79, 1);
            border-radius: 4px;
            background: rgba(91, 109, 128, 0.04);
            padding: 6px 8px;
            font-weight: 400;

            div {
                margin: 4px 0;
                padding: 6px 14px;
                white-space: nowrap;
            }
        }

        .rightsear {
            font-size: 16px;
            padding: 0 16px;

            .boxList {
                margin: 18px 0px 0px 0px;

                h2 {
                    font-size: 16px;
                    color: rgba(62, 70, 79, 1);
                    font-weight: 700;
                    padding: 0;
                    margin: 0px 0 16px 0;
                }

                p {
                    padding: 0;
                    margin: 0;
                }
            }
        }
    }
</style>